﻿{% extends "cashflow/base.html" %}
{% load humanize %}

{% block addition_header %}

  <style type="text/css">
fieldset { padding:0; border:0; margin-top:25px; }
#billaddform label, #billaddform input, #billaddform textarea {
  display: inline-block;
}

	</style>
{% endblock %}

{% block nav %}
  {% include "cashflow/nav.html" %}
{% endblock %}

{% block subnav %}
  {% include "cashflow/navsub-accountlist.html" %}
{% endblock %}


{% block toolbar %}
Overview
{% endblock %}


{% block content %}
<h1>Bill Incoming/Alert</h1>

<script>
$(function(){
		$( "#startdate" ).datepicker();
    $( "#enddate" ).datepicker();
    $( "#id_date" ).datepicker();

    $("#dailyoption").show().siblings().hide();    
    
    $("#freq").change(function(){
        var option = $(this).find("option:selected").val();
        $("#"+option+"option").show().siblings().hide();
    }); 

		$( "#billaddform" ).dialog({
			autoOpen: false,
			width: 480,      
      modal: true,
			buttons: {
				"Add": function() {
					var bValid = true;
					// allFields.removeClass( "ui-state-error" );
            var freq = $("#freq").find("option:selected").val();
            $("#"+freq+"option").show().siblings().remove();
						$( "#billaddform" ).submit();
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});    
    
    $( "#create-bill" )
			.button()
			.click(function() {
				$( "#billaddform" ).dialog( "open" );
		});
    $( "#manage-bill" )
			.button()
			.click(function() {
				$( "#billaddform" ).dialog( "open" );
		});    
    
});

</script>

<a id="create-bill">Add Bill</a> / <a id="manage-bill">Manage Bill</a>
<form id="billaddform" title="Repeat" method="POST" action="/cashflow/bill/add/">
{% csrf_token %}
	<table>{{ form }}</table>

  <div id="messagearea"> </div>
  <fieldset>
    <label for="freq" class="label"> Repeats: </label>
    <select id="freq" name="freq">
      <option value="daily" selected="selected">Daily</option>
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
      <option value="yearly">Yearly</option>
    </select>
    <label for="interval" class="label"> Interval: </label>
    <input type="text" size="2" value="1" name="interval" id="interval">
  </fieldset>
  
  <div id="optiondisplay">
    <fieldset id="dailyoption" style="display:none">
    </fieldset>

    <fieldset id="weeklyoption" style="display:none">
      Repeat on:<br />
      <div style="float:left;margin:5px;">
        <label for="byweekday">Mon</label>
        <input type="checkbox" name="byweekday" value="MO">
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Tue</label>
        <input type="checkbox" name="byweekday" value="TU">   
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Wed</label>
        <input type="checkbox" name="byweekday" value="WE"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Thu</label>
        <input type="checkbox" name="byweekday" value="TH"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Fri</label>
        <input type="checkbox" name="byweekday" value="FR"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Sat</label>
        <input type="checkbox" name="byweekday" value="SA"> 
      </div>
      <div style="float:left;margin:5px;">
        <label for="byweekday">Sun</label>
        <input type="checkbox" name="byweekday" value="SU">       
      </div>
    </fieldset>

    <fieldset id="monthlyoption" style="display:none">
      Repeat on:<br />
      <input type="radio" value="DAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:DAYOFMONTH">
      <label for="repeatmonthlytype:DAYOFMONTH"> Day </label>
      <select name="bymonthday" id="bymonthday">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      of the month 
      <br />
      <input type="radio" value="WEEKDAYOFMONTH" name="rimonthlytype" id="repeatmonthlytype:WEEKDAYOFMONTH">
      <label for="repeatmonthlytype:WEEKDAYOFMONTH"> The </label>
      <select name="weekdayofmonthindex">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
        <option value="4">fourth</option>
        <option value="-1">last</option>
      </select>
      <select name="weekdayofmonth">
        <option value="MO">Monday</option>
        <option value="TU">Tuesday</option>
        <option value="WE">Wednesday</option>
        <option value="TH">Thursday</option>
        <option value="FR">Friday</option>
        <option value="SA">Saturday</option>
        <option value="SU">Sunday</option>
      </select>
      of the month 
    </fieldset>

    <fieldset id="yearlyoption" style="display:none">
      Repeat on:<br />
      <input type="radio" value="DAYOFMONTH" name="riyearlyType" id="repeatyearlytype:DAYOFMONTH">
      <label for="repeatyearlytype:DAYOFMONTH"> Every </label>
      <select name="yearlybymonth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="yearlybymonthday">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
      <br />
      <input type="radio" value="WEEKDAYOFMONTH" name="riyearlyType" id="repeatyearlytype:WEEKDAYOFMONTH">
      <label for="repeatyearlytype:WEEKDAYOFMONTH"> The </label>
      <select name="yearlyweekdayofmonth">
        <option value="1">first</option>
        <option value="2">second</option>
        <option value="3">third</option>
        <option value="4">fourth</option>
        <option value="-1">last</option>
      </select>
      <label for="repeatyearlytype:WEEKDAYOFMONTH"> </label>
      <select name="yearlyweekday">
        <option value="MO">Monday</option>
        <option value="TU">Tuesday</option>
        <option value="WE">Wednesday</option>
        <option value="TH">Thursday</option>
        <option value="FR">Friday</option>
        <option value="SA">Saturday</option>
        <option value="SU">Sunday</option>
      </select>
      of
      <select name="yearlyweekdaymonth">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </fieldset>  
  </div>
  <fieldset>
    <label class="label">Start Date:</label><input type="text" name="startdate" id="startdate" value="{{date_from|date:"m/d/Y"}}"><br />
    <label class="label">End recurrence:</label><br />
    <input type="radio" checked="checked" value="NOENDDATE" name="end" id="end">
    Never
    <br />
    <input type="radio" value="BYOCCURRENCES" name="end" id="end">
    After
    <input type="text" size="3" value="10" name="count"> occurrence(s)
    <br />
    <input type="radio" value="BYENDDATE" name="end" id="end">
    On 
    <input type="text" name="enddate" id="enddate">
  </fieldset>  
</form>



from {{date_from|date:"d F Y"}} to {{ date_to|date:"d F Y" }}
{% for bill in bills|dictsort:"date" %}
  {% ifchanged %}<div style="clear:both;"><h2>{{ bill.date|date:"F Y" }}</h2></div>{% endifchanged %}
  <div style="float:left;display:block;width:300px;padding: 10px 10px;margin: 2px;border: 1px solid #ADB9C2;">
    <div style="float:right;font-size:1.8em;color:{%if bill.amount > 0 %}green{%else%}red{%endif%};">{{ bill.amount }}</div>
    {{ bill.date|date:"d b Y" }}<br />
    <b><a href="#">{{ bill.name }}</a></b>
    <hr />
    {% if bill.alert %}
      <div style="float:left;color:red;">Over Due</div>
    {% endif %}
    {% if bill.paid %}
      <div style="float:left;color:green;">Paid</div>
    {% else %}    
    <div style="float:right;"><a id="add-transaction{{forloop.counter}}" href="#">Enter</a></div>
    <script>
      $(function() {
        $( "#id_date{{forloop.counter}}" ).datepicker();

        $( "#dialog-form-transaction{{forloop.counter}}" ).dialog({
          autoOpen: false,
          modal: true,
          height: 600,
          width: 476,      
          buttons: {
            "Add Transaction": function() {
              var bValid = true;
              // allFields.removeClass( "ui-state-error" );
                $( "#transaction-form{{forloop.counter}}" ).submit();
            },
            Cancel: function() {
              $( this ).dialog( "close" );
            }
          }
        });

        $( "#add-transaction{{forloop.counter}}" )
          .click(function() {
            $( "#dialog-form-transaction{{forloop.counter}}" ).dialog( "open" );
          });      
      });
      </script>    
    <div id="dialog-form-transaction{{forloop.counter}}" title="Add Transaction">
      <form method="POST" id="transaction-form{{forloop.counter}}" action="/cashflow/bill/pay/">
        {% csrf_token %}    
        <input type="hidden" name="billid" value="{{ bill.id }}">
        <input type="hidden" name="billdate" value="{{ bill.date|date:"m/d/Y" }}">
        <fieldset>
            <p><label for="id_account">Account:</label> <select id="id_account" class="text ui-widget-content ui-corner-all" name="account">
              {% for account in accounts %}
                <option value="{{account.id}}" {% ifequal bill.account.id account.id%}selected="selected"{% endifequal %}>{{account.name}}</option>
              {% endfor %}
            </select></p>
            <p><label for="id_name">Name:</label> <input id="id_name" type="text" class="text ui-widget-content ui-corner-all" name="name" value="{{bill.name}}"></p>
            <p><label for="id_date{{forloop.counter}}">Date:</label> <input id="id_date{{forloop.counter}}" type="text" class="text ui-widget-content ui-corner-all hasDatepicker" name="date" value="{% now 'm/d/Y' %}"></p>
            <p><label for="id_amount">Amount:</label> <input id="id_amount" type="text" class="text ui-widget-content ui-corner-all" name="amount" value="{{bill.amount}}"></p>
            <p><label for="id_category">Category:</label> <select id="id_category" class="text ui-widget-content ui-corner-all" name="category">
              {% for category in categorys %}
                <option value="{{category.id}}" {% ifequal bill.category.id category.id%}selected="selected"{% endifequal %}>{{category.name}}</option>
              {% endfor %}
            </select></p>
            <p><label for="id_tags">Tags:</label> <input id="id_tags" type="text" class="text ui-widget-content ui-corner-all" name="tags"></p>
            <p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
          </fieldset>
      </form>
    </div>
    {% endif %}
    
  </div>
{% endfor %}



{% endblock %}